<template>
  <div class="form">
    <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="170px">

      <div v-for="item in formData.procureditem">
        <el-form-item style="width:460px">
          <div class="addlist"> <span>Billing Person {{item.index}}</span>
            <el-button plain type="danger" @click="removeItem(item)" size="mini">Delete</el-button>
          </div>
        </el-form-item>
        <el-form-item label="Title" style="width:460px">
          <el-input v-model="item.title" autocomplete="off" placeholder="Enter Title name" />
        </el-form-item>
        <el-form-item label="Attention" style="width:460px">
          <el-input v-model="item.attention" placeholder="Enter Attention name"></el-input>
        </el-form-item>
        <el-form-item label="Tel" style="width:460px">
          <el-input v-model="item.tel" placeholder="Enter Tel Number"></el-input>
        </el-form-item>
        <el-form-item label="Fax" style="width:460px">
          <el-input v-model="item.fax" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="Address" style="width:460px">
          <el-input v-model="item.address" placeholder="Enter Address"></el-input>
        </el-form-item>
      </div>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addItem()" size="mini" style="margin-left: 170px;">+Add</el-button>
      <el-button type="primary" size="mini" @click="save('ruleForm')" style="margin-left: 30px;">Submit</el-button>
    </div>
  </div>
</template>
<script>
  import CURD from "@/mixin/CURD";
  import {
    destroy,
    index as addrelist,
    store as addrestore
  } from "@/api/attention";
  export default {
    name: "attentionsIndex",
    props: {
      id: {
        type: String,
        default: 0
      }
    },
    components: {

    },
    mixins: [CURD],
    data() {
      return {
        cid: this.id,
        isEdit: false,
        isNew: false,
        formData: {
          procureditem: []
        },
        module: "attention",
        newTitle: "New attentions",
        editTitle: "Edit attentions",
        group: [],
        xiabiao: -1,
      };
    },
    async created() {
      const adddata = await addrelist(1, 100, {
        customer_id: this.cid
      });
      if (adddata.data.length > 0) {
        this.formData.procureditem = adddata.data;
      } else {
        this.addItem();
      }
    },
    methods: {
      addItem() { //增加行
        this.xiabiao += 1
        this.formData.procureditem.push({
          id: null,
          index: this.xiabiao,
          title: "",
          attention: "",
          address: "",
          tel: "",
          fax: "",
          customer_id: this.cid,
        });
      },
      async removeItem(row) {
        console.log(row, "row")
        const index = this.formData.procureditem.indexOf(row)
        if (this.formData.procureditem.length > 1) {
          this.formData.procureditem.splice(index, 1);
          if (row.id > 0) {
            await destroy(row.id);
          }
        } else {
          this.$message.error("Keep at least one row of data!")
        }
      },
      async save(form) {
        console.log(this.formData)
        this.$refs[form].validate(async (valid) => {
          if (valid) {
            for (var i = 0; i < this.formData.procureditem.length; i++) {
              var tm = this.formData.procureditem[i].title
              var tattention = this.formData.procureditem[i].attention
              var ttel = this.formData.procureditem[i].tel
              var tfax = this.formData.procureditem[i].fax
              var taddress = this.formData.procureditem[i].address
              if (tm === null || tm.trim().length === 0) {
                this.$message.error("please input title");
                return false
              }
              if (tattention === null || tattention.trim().length === 0) {
                this.$message.error("please input attention");
                return false
              }
              if (ttel === null || ttel.trim().length === 0) {
                this.$message.error("please input tel");
                return false
              }
              if (tfax === null || tfax.trim().length === 0) {
                this.$message.error("please input fax");
                return false
              }
              if (taddress === null || taddress.trim().length === 0) {
                this.$message.error("please input address");
                return false
              }
            }
            try {
              let {
                info
              } = await addrestore(this.formData);
              this.$message.success("Save successfully");
              this.fetchData();
              this.isEdit = false;
              this.isNew = false;
            } catch (error) {
              let result = error.response.data;
              this.$message.error(result.info);
            }
          } else {
            this.$message.error("Data verification error, please input according to the specified rules");
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .customWidth {
    width: 80%;
  }

  .addlist {
    border-bottom: 1px solid #ececec;
    display: flex;
    justify-content: space-between;
    width: 460px;
    position: relative;
    height: 40px;
    left: -85px;
  }
</style>
<style>
  .warpper {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .table,
  .toolbar,
  .page {
    margin: 20px;
  }

  .toolbar {
    margin-top: 10px;
    padding: 5px;
  }

  .table {
    margin-bottom: 10px;
  }

  .page {
    margin-top: 10px;
    text-align: center;
  }

  .green-text {
    color: green;
  }

  .red-text {
    color: red;
  }

  .yellow-text {
    color: yellow;
  }

  .el-form-item {
    margin-bottom: 22px !important;
  }
</style>